<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Export to Excel</title>
</head>
<body>
    <div id="list" style="display:flex">
        <div id="source_table" style="width:50%; height:500px;">
            <table>
                <thead>
                    <tr>
                        <th>Module</th>
                        <th>Column 1</th>
                        <th>Column 2</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Module1</td>
                        <td>Data1</td>
                        <td>Data2</td>
                    </tr>
                    <tr>
                        <td>Module2</td>
                        <td>Data3</td>
                        <td>Data4</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div id="target_table" style="width:50%; height:500px;">
            <table>
                <thead>
                    <tr>
                        <th>Module</th>
                        <th>Column 1</th>
                        <th>Column 2</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Module1</td>
                        <td>Data5</td>
                        <td>Data6</td>
                    </tr>
                    <tr>
                        <td>Module2</td>
                        <td>Data7</td>
                        <td>Data8</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <button onclick="exportToExcel()">Export to Excel</button>

    <script>
        function exportToExcel() {
            const sourceTable = document.getElementById('source_table').querySelector('table');
            const targetTable = document.getElementById('target_table').querySelector('table');

            const modules = {};
            const moduleFieldIndex = 0;

            const sourceRows = sourceTable.rows;
            const targetRows = targetTable.rows;

            const targetMap = {};
            for (let i = 1; i < targetRows.length; i++) { // Start from 1 to skip header
                const targetRow = targetRows[i];
                const targetModule = targetRow.cells[moduleFieldIndex].innerText;
                if (!targetMap[targetModule]) {
                    targetMap[targetModule] = [];
                }
                targetMap[targetModule].push(targetRow);
            }

            for (let i = 1; i < sourceRows.length; i++) { // Start from 1 to skip header
                const sourceRow = sourceRows[i];
                const sourceModule = sourceRow.cells[moduleFieldIndex].innerText;
                const targetRowsForModule = targetMap[sourceModule] || [];
                let foundMatch = false;

                for (let j = 0; j < targetRowsForModule.length; j++) {
                    const targetRow = targetRowsForModule[j];
                    let rowHtml = '<tr>';
                    for (let k = 0; k < sourceRow.cells.length; k++) {
                        const sourceCell = sourceRow.cells[k];
                        const targetCell = targetRow.cells[k];
                        const color = sourceCell.innerText === targetCell.innerText ? 'green' : 'red';
                        rowHtml += `<td style="background-color:${color};">${sourceCell.innerText}</td>`;
                    }
                    rowHtml += '</tr>';

                    if (!modules[sourceModule]) {
                        modules[sourceModule] = [];
                    }
                    modules[sourceModule].push(rowHtml);
                    foundMatch = true;
                    break;
                }

                if (!foundMatch) {
                    let rowHtml = '<tr style="background-color:gray;">';
                    for (let k = 0; k < sourceRow.cells.length; k++) {
                        const sourceCell = sourceRow.cells[k];
                        rowHtml += `<td style="background-color:gray;">${sourceCell.innerText}</td>`;
                    }
                    rowHtml += '</tr>';

                    if (!modules[sourceModule]) {
                        modules[sourceModule] = [];
                    }
                    modules[sourceModule].push(rowHtml);
                }
            }

            let worksheetsHtml = '';
            let tablesHtml = '';

            // 导出原始内容到第一个 sheet
            const originalContent = document.getElementById('list').innerHTML;
            worksheetsHtml += `<x:ExcelWorksheet>
                <x:Name>Original Data</x:Name>
                <x:WorksheetOptions>
                    <x:DisplayGridlines/>
                </x:WorksheetOptions>
            </x:ExcelWorksheet>`;
            tablesHtml += `<table>${originalContent}</table>`;

            // 导出分组数据到不同的 sheet
            for (const module in modules) {
                const rowsHtml = modules[module].join('');
                const tableHtml = `<table>${rowsHtml}</table>`;

                // 每个 module 的数据单独生成一个 sheet
                worksheetsHtml += `<x:ExcelWorksheet>
                    <x:Name>${module}</x:Name>
                    <x:WorksheetOptions>
                        <x:DisplayGridlines/>
                    </x:WorksheetOptions>
                </x:ExcelWorksheet>`;

                tablesHtml += `<div style="display:none;">${tableHtml}</div>`; // 隐藏内容，避免重复显示
            }

            const finalHtml = `
                <html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40">
                    <head>
                        <!--[if gte mso 9]><xml>
                            <x:ExcelWorkbook>
                                <x:ExcelWorksheets>
                                    ${worksheetsHtml}
                                </x:ExcelWorksheets>
                            </x:ExcelWorkbook>
                        </xml><![endif]-->
                        <style>
                            table { border-collapse: collapse; border-spacing: 0; }
                            table, th, td { border: 1px solid black; }
                            th { font-weight: bold; background-color: #333; }
                            th, td { border-right: solid 1px #000; border-bottom: solid 1px #000; white-space: nowrap; }
                            td { mso-number-format: ""; }
                        </style>
                    </head>
                    <body>
                        ${tablesHtml}
                    </body>
                </html>
            `;

            const link = document.createElement('a');
            link.href = 'data:application/vnd.ms-excel;base64,' + window.btoa(unescape(encodeURIComponent(finalHtml)));
            link.download = 'export.xls';
            link.click();
        }
    </script>
</body>
</html>